import React,{Component} from 'react';
import Loading from './Loading/Loading'
import { BackHandler, Platform, View, Text, Image, StatusBar, TouchableWithoutFeedback, ScrollView, WebView, Animated, Easing } from 'react-native';

export default class NewsDetail extends Component {
    constructor(props){
        super(props);
        this.state = {
            isModal: false,
            mask: false,
            // 弹窗初始数据
            currentPosition: 85,//位置标志位，记录当前value
            position: new Animated.Value(85), //设置初始值
        }
        this.onBackAndroid = this.onBackAndroid.bind(this)
    }

    componentWillMount() {
      if (Platform.OS === 'android') {
        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
      }
    }

    componentWillUnmount(){
        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }

    onBackAndroid(){
        let that = this;
        if(this.state.mask){
            this.setState({
                mask: false
            },function () {
            that.state.currentPosition = that.state.currentPosition==85?0:85;
                Animated.spring(
                    that.state.position,
                    {
                        toValue: that.state.currentPosition,
                        easing: Easing.linear,
                        bounciness: 8,  
                        useNativeDriver: true
                    }
                ).start()
            });
            return true
        }
    }

    // 给webview传递数据
    sendMessage() {
        this.webview.postMessage('给webview传递数据,这是rn传到webview的数据！');
    }
    // 接收webview传递过来的数据
    getWebMess(e){
        alert(e.nativeEvent.data)
    }

    _showModal(){
        this.setState({
            isModal: !this.state.isModal
        });
    }

    _onRequestClose() {
        this.setState({
            isModal:false
        });
    }

    chooseAddress(){
        let that = this;
        this.setState({
            mask: !this.state.mask
        },function () {
            that.state.currentPosition = that.state.currentPosition==85?0:85;
            Animated.spring(
                that.state.position,
                {
                    toValue: that.state.currentPosition,
                    easing: Easing.linear,
                    bounciness: 8,  
                    useNativeDriver: true
                }
            ).start()
        });
        
    }

    render() {
        const source = {uri:'file:///android_asset/detailHtml.html'}
        const { params } = this.props.navigation.state;
        const {navigate,goBack,state} = this.props.navigation;
        return (
            <View style={{
                width: '100%',
                height: '100%',
                // paddingTop: StatusBar.currentHeight, 
                backgroundColor: '#fff', 
                position: 'absolute',
                left: 0, 
                top: 0
            }}>
                <View style={{height: 44, backgroundColor: '#fff', paddingLeft: 15, paddingRight: 15, paddingTop: 6, paddingBottom: 6,
                    flexDirection: 'row',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                    borderBottomWidth: 1,
                    borderColor: '#eeeeee',
                }}
                >
                    <TouchableWithoutFeedback onPress={()=>goBack()}>
                        <View style={{paddingRight: 10,paddingTop: 5,paddingBottom: 5,}}>
                            <Image style={{
                                width: 12,
                                height: 22,
                            }} source={require('../images/backBtn.png')} />
                        </View>
                    </TouchableWithoutFeedback>
                    <Text style={{color: "#000000", fontSize: 15}}>资讯详情</Text>
                    <TouchableWithoutFeedback onPress={this.chooseAddress.bind(this)}>
                        <Image style={{
                            width: 30,
                            height: 27,
                        }} source={require('../images/shareBtn.png')} />
                    </TouchableWithoutFeedback>

                </View>
                <View style={{flex: 1}}>
                    <WebView
                        ref={webview => { this.webview = webview; }}
                        source={source}
                        style={{width: '100%',height: '100%'}}
                        onMessage={this.getWebMess.bind(this)}
                    />
                </View>
                <Loading 
                    // 控制Modal的显示
                    visible={this.state.isModal}
                    // 安卓返回键触发回调 
                    onRequestClose={this._onRequestClose.bind(this)}
                />

                {/* 省市联动弹窗 */}
                {
                    this.state.mask?
                    <TouchableWithoutFeedback onPress={()=>this.chooseAddress()}>
                        <View style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,0.4)', zIndex: 100}}></View>
                    </TouchableWithoutFeedback>
                    :
                    null
                }
                
                <Animated.View style={{paddingTop: 10, paddingBottom: 10, position: 'absolute', left: 0, right: 0, bottom: 0, transform: [{translateY:this.state.position}], backgroundColor: '#fff', zIndex: 1000}}>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <TouchableWithoutFeedback>
                            <View style={{height: 65, flex: 1, justifyContent: 'space-between', alignItems: 'center'}}>
                                <Image style={{
                                    width: 45,
                                    height: 38
                                }} source={require('../images/share-wetchat.png')}/>
                                <Text style={{fontSize: 13}}>微信</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback>
                            <View style={{height: 65, flex: 1, justifyContent: 'space-between', alignItems: 'center'}}>
                                <Image style={{
                                    width: 36,
                                    height: 36
                                }} source={require('../images/share-friend.png')}/>
                                <Text style={{fontSize: 13}}>朋友圈</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback>
                            <View style={{height: 65, flex: 1, justifyContent: 'space-between', alignItems: 'center'}}>
                                <Image style={{
                                    width: 34,
                                    height: 40
                                }} source={require('../images/share-qq.png')}/>
                                <Text style={{fontSize: 13}}>QQ</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback>
                            <View style={{height: 65, flex: 1, justifyContent: 'space-between', alignItems: 'center'}}>
                                <Image style={{
                                    width: 40,
                                    height: 32
                                }} source={require('../images/share-weibo.png')}/>
                                <Text style={{fontSize: 13}}>微博</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                </Animated.View>
            </View>
        );
    }
}